﻿<link href="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    <table border="0" style="width:100%;">
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[value]及相应方法[getValue、setValue、reset、clear]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 value 设置 validatebox 的初始值
                <br />
                <input id="v1" class="easyui-validatebox" type="text" value="" data-options="value:'醉生梦死'" />
            </td>
            <td>
                通过方法 setValue 设置 validatebox 的 value 值
                <br />
                <a id="btn1" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置value为“朝花夕拾”</a>
                <br />
            </td>
            <td>
                通过方法 getValue 获取 validatebox 的 value 值
                <br />
                <a id="btn11" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">获取value值</a>
                <br />
            </td>
        </tr>
        <tr style="height:70px;">
            <td>
                通过方法 reset 设置 validatebox 的 value 值为初始值
                <br />
                <a id="btn111" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置value为初始值</a>
                <br />
            </td>
            <td>
                通过方法 clear 设置 validatebox 的 value 值为空值
                <br />
                <a id="btn1111" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置value为空值</a>
                <br />
            </td>
            <td></td>
        </tr>

        <tr style="height:40px;">
            <td colspan="4">
                ***********************分割线*************************************************
            </td>
        </tr>
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[disabled]及相应方法[enable、disable]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 disabled 设置 validatebox 的禁用状态
                <br />
                <input id="v2" class="easyui-validatebox" type="text" value="" data-options="disabled:true" />
            </td>
            <td>
                通过方法 enable 启用 validatebox
                <br />
                <a id="btn2" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">启用</a>
                <br />
            </td>
            <td>
                通过方法 disable 禁用 validatebox
                <br />
                <a id="btn22" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">禁用</a>
                <br />
            </td>
        </tr>

        <tr style="height:40px;">
            <td colspan="4">
                ***********************分割线*************************************************
            </td>
        </tr>
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[readonly]及相应方法[readonly]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 readonly 设置 validatebox 的只读状态
                <br />
                <input id="v3" class="easyui-validatebox" type="text" value="" data-options="readonly:true" />
            </td>
            <td>
                通过方法 readonly 关闭 validatebox 的只读状态
                <br />
                <a id="btn3" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">关闭只读状态</a>
                <br />
            </td>
            <td>
                通过方法 readonly 启用 validatebox 的只读状态
                <br />
                <a id="btn33" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">启用只读状态</a>
                <br />
            </td>
        </tr>

        <tr style="height:40px;">
            <td colspan="4">
                ***********************分割线*************************************************
            </td>
        </tr>
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[width]及相应方法[resize]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 width 设置 validatebox 的宽度
                <br />
                <input id="v4" class="easyui-validatebox" type="text" value="" data-options="width:180" />
            </td>
            <td>
                通过方法 resize 设置 validatebox 的宽度
                <br />
                <a id="btn4" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置宽度为100</a>
                <br />
            </td>
            <td>
                通过方法 resize 启用 validatebox 的宽度
                <br />
                <a id="btn44" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置宽度为150</a>
                <br />
            </td>
        </tr>

        <tr style="height:40px;">
            <td colspan="4">
                ***********************分割线*************************************************
            </td>
        </tr>
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[prompt]及相应方法[setPrompt]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 prompt 设置 validatebox 的“提示值”
                <br />
                <input id="v5" class="easyui-validatebox" type="text" value="" data-options="prompt:'请输入账号'" />
            </td>
            <td>
                通过方法 setPrompt 设置 validatebox 的“提示值”
                <br />
                <a id="btn5" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置“提示值”为“请输入密码”</a>
                <br />
            </td>
            <td>
                通过方法 setPrompt 启用 validatebox 的“提示值”
                <br />
                <a id="btn55" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">设置“提示值”为“请输入邮箱”</a>
                <br />
            </td>
        </tr>

        <tr style="height:40px;">
            <td colspan="4">
                ***********************分割线*************************************************
            </td>
        </tr>
        <tr style="color:red;font-size:16px;font-weight:bold;">
            <td colspan="4">属性[autoFocus、autoValidate]的扩展</td>
        </tr>
        <tr style="height:70px;">
            <td>
                初始化时，通过属性 autoFocus 设置 validatebox 的“是否自动获得焦点”
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="autoFocus:true" />
            </td>
            <td>
                初始化时，通过属性 autoValidate 设置 validatebox 的“是否立即进行一次验证”
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="required:true,autoValidate:true" />
            </td>
            <td>
                初始化时，通过属性 autoValidate 设置 validatebox 的“是否立即进行一次验证”
                <br />
                <input class="easyui-validatebox" type="text" value="" data-options="required:true,autoValidate:false" />
            </td>
        </tr>
    </table>
</div>

<script>
    $(function () {

        $("#btn1").click(function () {
            $("#v1").validatebox("setValue", "朝花夕拾");
        });

        $("#btn11").click(function () {
            alert($("#v1").validatebox("getValue"));
        });

        $("#btn111").click(function () {
            $("#v1").validatebox("reset");
        });

        $("#btn1111").click(function () {
            $("#v1").validatebox("clear");
        });

        $("#btn2").click(function () {
            $("#v2").validatebox("enable");
        });

        $("#btn22").click(function () {
            $("#v2").validatebox("disable");
        });

        $("#btn3").click(function () {
            $("#v3").validatebox("readonly", false);
        });

        $("#btn33").click(function () {
            $("#v3").validatebox("readonly", true);
        });

        $("#btn4").click(function () {
            $("#v4").validatebox("resize", 100);
        });

        $("#btn44").click(function () {
            $("#v4").validatebox("resize", 150);
        });

        $("#btn5").click(function () {
            $("#v5").validatebox("setPrompt", "请输入密码");
        });

        $("#btn55").click(function () {
            $("#v5").validatebox("setPrompt", "请输入邮箱");
        });

    });
</script>